<template>
	<view class="wrap yjfk-form-right">
		<view class="bg">
			<view class="title">
				吐槽内容
			</view>
			
		</view>
			<image class="bg2" src="https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/user/19.png" mode="">
		
			</image>
	<view class="form">
		<u-form :model="model" :rules="rules" ref="uForm" label-position="top">
			<u-form-item class="dif infos" :border-bottom="false" prop="content">
				<u-input  placeholder-style="color:rgba(255,255,255,0.5);" :custom-style="{color:'#fff'}" type="textarea" placeholder="请填写10字以上的描述以便我们提供更好的帮助"
					v-model="model.content" height="240" maxlength="500" />
			</u-form-item>
			<u-form-item :border-bottom="false" :label="'相关截图（选填）'+picNum+'/3'">
				<u-upload multiple maxCount="3" ref="uUpload" :show-progress="false" :action="uploadUrl"
					:auto-upload="true" :header="uploadHeaders" @on-success="onSuccess" @on-remove="onRemove"
					:before-remove="beforeRemove"></u-upload>
			</u-form-item>
			<u-form-item class="dif" :border-bottom="false" label="联系方式" prop="contact">
				<u-input placeholder-style="color:rgba(255,255,255,0.5);" :custom-style="{color:'#fff'}" placeholder="请输入您的联系方式" v-model="model.contact" type="text"
					height="90" maxlength="200"></u-input>
			</u-form-item>
		</u-form>
	</view>
		<view class="form-footer">
			<u-button class="btn" type="primary" @click="submit">提交</u-button>
		</view>
	</view>
</template>
<script>
	import config from '../../common/config.js';
	export default {
		data() {
			return {
				// 文件上传地址
				uploadUrl: '',
				// 图片上传头信息
				uploadHeaders: {},
				// 图片数量
				picNum: 0,
				model: {
					content: '',
					contact: '',
				},
				rules: {
					contact: [
						{
							required: true,
							message: '请输入您的联系方式',
							min: 11,
							max: 11,
							trigger: ['change','blur'],
						}
					],
					content: [
						{
							required: true,
							min: 10, max: 500,
							message: '吐槽内容在 10 到 500 个字符之间',
							trigger: ['change','blur'],
						}
					],
				}
			};
		},
		onLoad() {
			// 设置上传接口头信息
			this.uploadHeaders = {
				Authorization: uni.getStorageSync('token')
			};
			// 文件上传地址
			this.uploadUrl = config.uploadUrlcs6;
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
			// 获取设备信息
			uni.getSystemInfo({
				success: res => {
					this.model.deviceInfo = JSON.stringify(res);
				}
			});
		},
		methods: {
			// 图片上传回调 data为服务器返回数据
			onSuccess(data, index, lists) {
				// 图片提示数量+1
				if (this.picNum < 4) {
					++this.picNum;
				}
				this.$u.toast('图片' + (index + 1) + '上传成功');
			},
			
			// 图片移除前的钩子
			beforeRemove(index, lists) {
			
				// 调用promise类  成功调用 resole 失败调用reject 需要修改上传类 底层方法
				return new Promise((resolve, reject) => {
			
					// 图片没有上传完
					if (!lists[index]['response']) {
						// 失败
						reject({
							msg: '移除失败：请等待图片上传成功后移除'
						})
					}
			
					// 移除oss 图片
					this.$u.api.mine.resourceRemoveOne({
						url: lists[index]['response']['data']['url']
					}).then(res => {
						if (res.code != 200) {
							// 失败
							reject({
								msg: res.msg
							});
						}
						// 成功
						resolve();
					})
				})
			},
			// 图片移除事件
			onRemove(index, lists, name) {
				// 图片提示数量 -1
				if (this.picNum > 0) {
					--this.picNum;
				}
			},
			// 提交注册
			submit() {
			
				this.$refs.uForm.validate(valid => {
					if (!valid) {
						this.$u.toast('您填写的信息有误，请根据提示修正。');
						return false;
					}
					
					// 上传成功的图片Url集合
					let successUrl = [];
					// 有文件上传
					if (this.$refs.uUpload.lists.length > 0) {
					
						// 遍历上传文件，获取进度为100（上传完成） 的图片url
						this.$refs.uUpload.lists.forEach(item => {
							if (item.progress == 100) {
								successUrl.push(item.response.data.url)
							}
						})
					
						// 图片上传集合的长度  !=  上传成功图片url集合
						if (this.$refs.uUpload.lists.length != successUrl.length) {
							this.$u.toast('图片没有全部上传成功，请等待上传完成后操作');
							return false;
						}
					}
					
					this.$u.api.mine.addRoast({
						phone: this.model.contact,
						content: this.model.content,
						picList: successUrl,
						appletId: this.vuex_appletId
					}).then(res => {
						if (res.code != '200') {
							this.$u.toast(res.msg);
							return false
						}
						uni.showModal({
							title: '提示',
							content: res.msg,
							showCancel: false,
							success: function() {
								uni.navigateBack();
							}
						});
					
					
					});
				});
			},
			cancel() {
				uni.navigateBack();
			}
		}
	};
</script>
<style lang="scss" scoped>
	.bg {
		width: 100%;
		height: 84rpx;
		background: url("https://wuyouzhuanapp.oss-cn-beijing.aliyuncs.com/FireAndFire/user/11.png") no-repeat;
		background-size: 100% 100%;
	}
	.title{
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #8CC950;
		line-height: 33rpx;
		padding: 32rpx 32rpx 13rpx;
	}
	
	.bg2 {
		display: block;		
		width: 100%;
		height: 291rpx;
		margin: 0 auto;

	}
	.infos /deep/ .u-form-item{
		padding: 0 !important;
	}
	
	.form{
		margin: -301rpx 32rpx 0 32rpx;
	}
	/deep/ .u-size-default{
		height: 113rpx;
		line-height: 113rpx;
	}
	.btn{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		width: 750rpx;
		height: 113rpx;
		background: #455FE8;
	}

	/deep/ .u-btn--primary {
		font-size: 36rpx;
		font-family: PingFang HK-Light, PingFang HK;
		font-weight: 300;
		color: #FFFFFF;
		border-radius: 0;
	}
	/deep/ .u-input__textarea{
		padding: 20rpx 0;
	}

	// .u-primary-hover {
	// 	background: linear-gradient(to right, rgba(70, 89, 255, 1), rgba(161, 129, 255, 1)) !important;
	// }

	/deep/ .u-list-item {
		background: rgba(45, 48, 85, 0.35);
	}

	/deep/ .u-form-item {
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #8CC950;
		line-height: 33rpx;
		padding: 20rpx 0;
	}


	.dif {
		/deep/ .u-form-item--right {
			background: rgba(45, 48, 85, 0.35);
			color: #FFFFFF;
			padding: 0 0 0 32rpx;
			border-radius: 22rpx;
			// border: 1rpx solid rgba(79, 48, 168, 1);
			color: #FFFFFF;
		}
	}
	/deep/ .u-input{
		// margin-top: -20rpx;
	}
	



	/deep/ .uni-textarea-textarea,
	/deep/ .uni-input-input {
		color: #fff;
		text-align: left;
	}
</style>